import { defineComponent, h } from "vue"
import { useEditComponents, useEditComponentOptions  } from "./components/hooks"
import { TextComponent } from "./components/text"
import { NumberComponent } from "./components/number"
import { DateComponent } from "./components/date"
import { CheckboxComponent } from "./components/checkbox"
import { RadioComponent } from "./components/radio"
import { SelectComponent } from "./components/select"
import { checkTargetSlotIsEmpty } from "./util"


export const EditComponent =  defineComponent (
    (props: CellProps, { slots }) => {

        // 列自定义编辑渲染函数
        if (typeof props.column.editRander === 'function') {
            return () => props.column.editRander?.(props)
        }

        // 插槽组件
        if (slots.editCell && !checkTargetSlotIsEmpty(slots.editCell?.(props))) {
            const { inputRef, visible } = useEditComponents(props)
            return () => h('div', { ref: inputRef, class: { 'edit-control-components': 1, visible: visible.value  } }, slots.editCell?.(props))
        }


        switch(props.column.type) {
            case 'number' : return () => h(NumberComponent, props)
            case 'date': return () => h(DateComponent, props)
            case 'radio': return () => h(RadioComponent, props)
            case 'checkbox' : return () => h(CheckboxComponent, props)
            case 'select' : return () => h(SelectComponent, props)
            default : return () => h(TextComponent, props)
        }

    },
    useEditComponentOptions()
)